<script type="x-template" id="overview-servers">
	<div class="content">
		<Breadcrumb>
	        <Breadcrumb-item>服务概览</Breadcrumb-item>
	        <Breadcrumb-item>主机</Breadcrumb-item>
	    </Breadcrumb>
	    <div style="height:8px;"></div>
		<i-table v-bind:columns="columns" v-bind:data="values"></i-table>
	</div>
</script>
<script>
	(function(){
		var initData = function(){
			var self = this;
			var http = this.$http;
			var error = function(){
				self.$Notice.error({
	                title:"温馨提示",
	                desc:"数据读取失败"
	            });
			};
			http.post("${base}/api/servers.json").then(function(res){
				if(res.status == 200){
					var data = [];
					var temp = res.data || {};
					for(var server in temp){
						var items = temp[server];
						for(var key in items){
							var item = items[key];
							item.server = server;
							data.push(item);
						}
					}
					self.values = data;
				}else{
					error();
				}
			}).catch(error);
		};
		Vue.component("overview-servers",{
			template:"#overview-servers",
			data:function(){
				initData.apply(this);
				return {
					columns:[
						{title:"ID",key:"_index",width:80,render:function(h,v){
							return v.index+1;
						}},
						{title:"服务名称",key:"server"},
						{title:"服务协议",key:"protocol"},
						{title:"服务地址",key:"host"},
						{title:"服务端口",key:"port"},
						{title:"服务类型",key:"provider",render:function(h,v){
							var data = v.row;
							if(data.provider === true){
								return "提供者";
							}else if(data.consumer === true){
								return "消费者";
							}else{
								return "未知";
							}
						}},
						{title:"服务状态",key:"online",render:function(h,v){
							if(v.row.online === true){
								return "已注册";
							}else{
								return "未注册";
							}
						}}
					],
					values:[]
				}
			}
		});
		routes.push({path:"/overview/servers",component:Vue.component("overview-servers")});
	})();
</script>